{% extends 'base.html' %}

{% block title %}首页 - 固定资产管理系统{% endblock %}

{% block extra_css %}
<style>
    :root {
        --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        --gradient-5: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        --gradient-6: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        --gradient-7: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
        --gradient-8: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);

        --shadow-soft: 0 8px 32px rgba(31, 38, 135, 0.37);
        --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.1);
        --shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.2);
        --border-radius: 20px;
        --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* 让左侧面板与模块区充满可用高度 */
    .left-panel {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }
    .modules-section {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .modules-section .modules-grid {
        flex: 1 1 auto; /* 占据剩余空间 */
    }
    .common-actions-wrapper {
        margin-top: auto; /* 将常用功能推到底部 */
    }

    body {
        background: #f5f7fb; /* 商务风：中性浅灰背景 */
        min-height: 100vh;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        overflow-x: hidden;
        color: #2d3748;
    }

    /* 英雄区域优化 */
    .dashboard-hero {
        background: #ffffff; /* 白色顶部横幅 */
        border-bottom: 1px solid #e6e8ee;
        border-radius: 0;
        padding: 24px 0;
        margin-bottom: 16px;
        color: #2d3748;
        position: relative;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .dashboard-hero::before { display: none; }

    /* 装饰元素 */
    .dashboard-hero::after { display: none; }

    .hero-decoration {
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        bottom: -100px;
        left: 10%;
        z-index: 1;
        filter: blur(40px);
    }

    .hero-content {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 30px;
    }

    .hero-text h1 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 8px;
        color: #1f2937;
        text-shadow: none;
    }

    .hero-text p {
        font-size: 0.95rem;
        opacity: 0.85;
        margin: 0;
        text-shadow: none;
        color: #4a5568;
    }

    /* 顶部英雄区域与搜索 */
    .dashboard-hero {
        padding: 14px 0 6px;
        background: transparent;
        border-bottom: 1px solid #eef1f6;
        margin-bottom: 12px;
    }

    .hero-content {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 16px;
    }

    .hero-title {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .hero-title i {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        background: #e8f1ff;
        color: #0d6efd;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .hero-text h1 {
        font-size: 1.35rem;
        margin: 0;
        line-height: 1.2;
    }

    /* 搜索框优化 */
    .hero-search {
        position: relative;
        min-width: 280px;
        width: 400px;
        max-width: 100%;
    }

    .hero-search input {
        width: 100%;
        padding: 8px 40px 8px 34px; /* 左侧为内置图标预留 */
        border: 1px solid #e6e8ee;
        border-radius: 8px;
        background: #ffffff;
        color: #2d3748;
        font-size: 0.9rem;
        box-shadow: none;
        transition: var(--transition);
    }

    .hero-search input:focus {
        outline: none;
        background: #ffffff;
        transform: none;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
        border-color: #cfe2ff;
    }

    .hero-search input::placeholder {
        color: #9aa5b1;
    }

    .hero-search .search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
        font-size: 14px;
        pointer-events: none;
    }

    .hero-search .search-btn {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        background: #0d6efd;
        border: none;
        border-radius: 6px;
        width: 36px;
        height: 36px;
        color: white;
        cursor: pointer;
        transition: var(--transition);
    }

    .hero-search .search-btn:hover {
        background: #0b5ed7;
        transform: translateY(-50%);
    }

    .main-dashboard {
        padding: 0 24px 32px;
        max-width: 1600px; /* 放宽列宽，减少留白 */
        margin: 0 auto;
    }

    /* 扩大容器在首页中的有效宽度，减少留白 */
    .dashboard-hero > .container,
    .main-dashboard > .container {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    @media (max-width: 992px) {
        .hero-content {
            grid-template-columns: 1fr;
            gap: 10px;
        }
        .hero-search {
            width: 100%;
            min-width: 0;
        }
    }

    /* 快捷操作小卡片 */
    .quick-actions {
        margin: -10px 0 20px;
    }

    .quick-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 10px;
    }

    .quick-card {
        background: #ffffff;
        border: 1px solid #e6e8ee;
        border-radius: 12px; /* 统一卡片圆角为12px */
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        color: #2d3748;
        text-decoration: none;
        box-shadow: none;
        transition: var(--transition);
    }

    .quick-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.08);
        border-color: #dbe0ea;
    }

    .quick-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: #0d6efd;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    .quick-title {
        font-weight: 600;
        font-size: 0.95rem;
        margin: 0;
    }

    .quick-sub {
        font-size: 0.8rem;
        color: #718096;
        margin: 0;
    }

    /* 统计卡片区域 */
    .stats-section {
        margin-bottom: 24px;
        border-top: 1px solid #f1f4f9; /* 细分隔线 */
        padding-top: 12px;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 12px;
        margin-bottom: 12px;
    }

    .stat-card {
        background: #ffffff;
        border: 1px solid #e6e8ee;
        border-radius: 12px;
        padding: 18px;
        position: relative;
        overflow: hidden;
        transition: var(--transition);
        cursor: pointer;
        box-shadow: none;
    }

    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 24px rgba(0,0,0,0.08);
    }

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: #0d6efd;
        opacity: 0.25;
    }

    .stat-card::after {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100px;
        height: 100px;
        background: var(--card-gradient);
        border-radius: 50%;
        opacity: 0.1;
        transition: var(--transition);
    }

    .stat-card:hover::after {
        transform: scale(1.5);
        opacity: 0.2;
    }

    .stat-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;
    }

    .stat-icon {
        width: 52px;
        height: 52px;
        border-radius: 10px;
        background: #0d6efd;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.2rem;
        box-shadow: none;
    }

    .stat-number {
        font-size: 2rem;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 6px;
        position: relative;
        z-index: 2;
    }

    .stat-label {
        color: #718096;
        font-size: 1rem;
        font-weight: 500;
        margin-bottom: 15px;
    }

    .stat-trend {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9rem;
        color: #4a5568;
    }

    .trend-up {
        color: #38a169;
    }

    .trend-down {
        color: #e53e3e;
    }

    /* 功能模块网格 */
    .modules-section {
        margin-bottom: 24px;
        border-top: 1px solid #f1f4f9; /* 细分隔线 */
        padding-top: 12px;
    }

    .section-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
        color: #2d3748;
    }

    .section-header h2 {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
        text-shadow: none;
    }

    .section-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: #e9f2ff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0d6efd;
        font-size: 1.1rem;
    }

    .modules-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 16px;
    }

    /* 模块区紧凑版本：减少留白，增大密度 */
    .modules-section.compact .modules-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 12px;
    }

    .modules-section.compact .module-card {
        padding: 14px;
    }

    .modules-section.compact .module-header {
        margin-bottom: 8px;
    }

    .modules-section.compact .module-title {
        font-size: 1.05rem;
    }

    .modules-section.compact .module-description {
        color: #6b7280;
        margin: 8px 0 12px;
        font-size: 0.92rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2; /* standard property for compatibility */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .modules-section.compact .module-stats {
        margin-top: 6px;
        gap: 10px;
    }

    .modules-section.compact .module-stat-item {
        font-size: 0.92rem;
    }

    /* 常用功能（紧凑） */
    .common-actions-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
        margin-top: 6px;
    }

    .common-action {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border: 1px solid #e6e8ee;
        border-radius: 12px;
        background: #ffffff;
        color: #2d3748;
        text-decoration: none;
        font-size: 0.9rem;
        transition: var(--transition);
    }

    .common-action:hover {
        background: #f6f8fc;
        border-color: #dbe0ea;
        transform: translateY(-1px);
    }

    .common-action i {
        width: 18px;
        text-align: center;
        color: #0d6efd;
    }

    /* 常用功能：置底且横向排列 */
    .common-actions-card {
        order: 100;              /* 放在模块网格底部 */
        grid-column: 1 / -1;     /* 占满整行 */
    }
    .common-actions-horizontal {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 10px;
        margin-top: 6px;
    }
    .common-actions-horizontal .common-action {
        flex: 0 1 180px;         /* 横向卡片最小宽度 */
    }
    @media (min-width: 1600px) {
        .common-actions-horizontal .common-action { flex-basis: 160px; }
    }

    /* 预警数字高亮 */
    .module-stat-number.warn {
        color: #d9534f; /* bootstrap danger */
        font-weight: 600;
    }

    .module-stat-link {
        margin-left: 8px;
        font-size: 0.85rem;
        color: #0d6efd;
        text-decoration: none;
    }

    .module-stat-link:hover { text-decoration: underline; }

    .module-card {
        background: #ffffff;
        border: 1px solid #e6e8ee;
        border-radius: 12px;
        padding: 18px;
        position: relative;
        overflow: hidden;
        transition: var(--transition);
        cursor: pointer;
        box-shadow: none;
    }

    .module-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 24px rgba(0,0,0,0.08);
    }

    .module-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: #0d6efd;
        opacity: 0.25;
    }

    .module-card::after {
        content: '';
        position: absolute;
        top: -100px;
        right: -100px;
        width: 200px;
        height: 200px;
        background: var(--module-gradient);
        border-radius: 50%;
        opacity: 0.05;
        transition: var(--transition);
    }

    .module-card:hover::after {
        transform: scale(1.2);
        opacity: 0.1;
    }

    .module-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 18px;
    }

    .module-icon {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        background: #0d6efd;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.05rem;
        box-shadow: none;
        position: relative;
        z-index: 2;
    }

    .module-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #1f2937;
        margin: 0;
    }

    .module-description {
        color: #6b7280;
        font-size: 0.9rem;
        line-height: 1.55;
        margin-bottom: 14px;
    }

    .module-stats {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        font-size: 0.85rem;
        color: #4a5568;
    }

    .module-stat-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .module-stat-number {
        font-weight: 700;
        color: #2d3748;
    }

    /* 侧边栏面板 */
    .dashboard-grid {
        display: grid;
        grid-template-columns: 1fr; /* 只保留主列，侧栏已并入模块区 */
        gap: 28px; /* 放松列间距 */
        align-items: stretch;
    }

    .sidebar {
        display: flex;
        flex-direction: column;
        gap: 20px; /* 放松侧栏卡片间距 */
    }

    .sidebar-card {
        background: #ffffff;
        border: 1px solid #e6e8ee;
        border-radius: 12px; /* 与其他卡片统一 */
        padding: 14px;
        box-shadow: none;
        transition: var(--transition);
    }

    /* 紧凑型侧栏小卡片 */
    .sidebar-card.compact {
        padding: 10px;
        border-radius: 10px;
    }
    .sidebar-card.compact .sidebar-header {
        margin-bottom: 10px;
        padding-bottom: 6px;
    }
    .sidebar-card.compact .sidebar-icon {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        font-size: 0.9rem;
    }
    .sidebar-card.compact .sidebar-title {
        font-size: 1rem;
    }
    .sidebar-card.compact .status-item {
        padding: 6px 0;
    }
    .sidebar-card.compact .status-value {
        padding: 2px 8px;
        font-size: 0.8rem;
    }
    .sidebar-card.compact .activity-item {
        gap: 10px;
        padding: 8px 0;
    }
    .sidebar-card.compact .activity-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 1rem;
    }
    .sidebar-card.compact { padding: 10px 12px; }
    .sidebar-card.compact .sidebar-title { font-size: 0.9rem; }
    .sidebar-card.compact .activity-title { font-size: 0.8rem; margin-bottom: 2px; }
    .sidebar-card.compact .activity-meta { gap: 6px; font-size: 0.74rem; }
    .sidebar-card.compact .status-item { padding: 6px 8px; }

    /* 功能模块：单列布局，洞察卡片堆叠在模块区之后（桌面也如此） */
    .modules-section {
        display: grid;
        grid-template-columns: 1fr; /* 全端单列，更加整齐统一 */
        gap: 20px;
        align-items: start;
    }
    .modules-left {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column; /* 让常用功能可贴底 */
        min-width: 0;
    }
    .insights-stack {
        grid-column: 1 / -1; /* 堆叠到模块下方 */
        display: flex;
        flex-direction: column;
        gap: 16px;
        position: static; /* 取消 sticky，避免右侧突兀 */
        top: auto;
        align-self: stretch;
    }

    /* 最近活动列表可滚动区域 */
    .activity-list {
        max-height: 300px;
        overflow: auto;
        padding-right: 4px; /* 让滚动条不遮挡内容 */
    }
    .activity-list::-webkit-scrollbar { width: 8px; }
    .activity-list::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.15); border-radius: 8px; }

    /* 更小的图标尺寸（洞察卡片） */
    .sidebar-card.compact .activity-icon { width: 32px; height: 32px; font-size: 0.95rem; }

    /* 分卡片定制：最近活动/资产状态分布 */
    .recent-activity-card .activity-list { max-height: 280px; }
    .asset-status-card { max-height: 220px; overflow: hidden; }
    .asset-status-card .status-value { font-size: 0.85rem; }

    /* 单列布局已覆盖全端，保留大屏微调仅用于密度优化（无需改变列数） */

    /* 大屏优化：进一步缩小全局网格间距，提升信息密度；增加列数 */
    @media (min-width: 1400px) {
        .quick-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
        .stats-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
        .modules-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
        .dashboard-grid { gap: 16px; }
    }

    @media (min-width: 1600px) {
        .quick-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
        .stats-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
        .modules-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
        .dashboard-grid { gap: 14px; }
        .main-dashboard { max-width: 1760px; }
    }

    .sidebar-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    }

    .sidebar-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f7fafc;
    }

    .sidebar-title {
        font-size: 1.2rem;
        font-weight: 700;
        color: #2d3748;
        margin: 0;
    }

    .sidebar-icon {
        width: 35px;
        height: 35px;
        border-radius: 8px;
        background: var(--gradient-1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1rem;
    }

    .status-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #f7fafc;
        transition: var(--transition);
    }

    .status-item:hover {
        background: rgba(0, 0, 0, 0.02);
        margin: 0 -15px;
        padding: 15px;
        border-radius: 10px;
    }

    .status-item:last-child {
        border-bottom: none;
    }

    .status-label {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 500;
        color: #4a5568;
    }

    .status-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .status-value {
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 12px;
        color: #0d6efd;
        font-size: 0.85rem;
        background: #e7f1ff;
        box-shadow: none;
    }

    .activity-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid #f7fafc;
        transition: var(--transition);
    }

    .activity-item:hover {
        background: rgba(0, 0, 0, 0.02);
        margin: 0 -15px;
        padding: 15px;
        border-radius: 10px;
    }

    .activity-item:last-child {
        border-bottom: none;
    }

    .activity-icon {
        width: 45px;
        height: 45px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.1rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        flex-shrink: 0;
    }

    .activity-content {
        flex: 1;
        min-width: 0;
    }

    .activity-title {
        font-weight: 600;
        color: #2d3748;
        margin-bottom: 5px;
        font-size: 0.9rem;
    }

    .activity-meta {
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 0.85rem;
        color: #718096;
    }

    .activity-time {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    /* 快捷操作浮动按钮 */
    .fab-container {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 1000;
    }

    .fab-main {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #0d6efd;
        border: none;
        color: white;
        font-size: 1.25rem;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(13, 110, 253, 0.25);
        transition: var(--transition);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .fab-main:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(13, 110, 253, 0.3);
    }

    .fab-menu {
        position: absolute;
        bottom: 80px;
        right: 0;
        display: flex;
        flex-direction: column;
        gap: 15px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: var(--transition);
    }

    .fab-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .fab-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: #ffffff;
        border: 1px solid #e6e8ee;
        border-radius: 10px;
        text-decoration: none;
        color: #2d3748;
        font-weight: 500;
        box-shadow: none;
        transition: var(--transition);
        white-space: nowrap;
    }

    .fab-item:hover {
        background: #f6f8fc;
        color: #2d3748;
        transform: translateX(-4px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.06);
    }

    .fab-item-icon {
        width: 20px;
        text-align: center;
    }

    /* 响应式设计 */
    @media (max-width: 992px) { /* 更晚切换为单列，保证侧栏更多时间在右侧 */
        .dashboard-grid {
            grid-template-columns: 1fr;
        }

        .sidebar {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 22px;
        }
    }

    @media (max-width: 768px) {
        .main-dashboard {
            padding: 0 15px 30px;
        }

        .hero-content {
            flex-direction: column;
            text-align: center;
        }

        .hero-search {
            min-width: 100%;
        }

        .hero-text h1 {
            font-size: 2.2rem;
        }

        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .modules-grid {
            grid-template-columns: 1fr;
        }

        .fab-container {
            bottom: 20px;
            right: 20px;
        }
    }

    /* 动画效果增强 */
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
    }

    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }

    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }

    /* 商务风：弱化动画 */
    .animate-float { animation: none; }
    .animate-pulse { animation: none; }
    .animate-slide-up { animation: none; opacity: 1; }

    .animate-shimmer {
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
        background-size: 200% 100%;
        animation: shimmer 2s infinite;
    }

    /* 加载状态样式 */
    .skeleton {
        background: #f0f0f0;
        border-radius: 4px;
        animation: pulse 1.5s infinite;
    }

    .skeleton-text {
        height: 16px;
        margin-bottom: 8px;
    }
</style>
{% endblock %}

{% block content %}
<!-- 英雄区域 -->
<div class="dashboard-hero">
    <div class="hero-decoration"></div>
    <div class="container">
        <div class="hero-content">
            <div class="hero-text">
                <div class="hero-title">
                    <i class="fas fa-building"></i>
                    <h1>固定资产管理系统</h1>
                </div>
            </div>
            <div class="hero-search">
                <span class="search-icon"><i class="fas fa-search"></i></span>
                <input type="text" placeholder="搜索资产、编号、部门..." id="globalSearch" aria-label="全局搜索">
                <button class="search-btn">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="main-dashboard">
    <div class="container">
        <!-- 快捷操作 -->
        <div class="quick-actions">
            <div class="quick-grid">
                <a class="quick-card" href="{% url 'assets:asset_create' %}" style="--gradient-1: var(--gradient-2);">
                    <div class="quick-icon" style="background: var(--gradient-2);"><i class="fas fa-plus"></i></div>
                    <div>
                        <p class="quick-title">新增资产</p>
                        <p class="quick-sub">快速录入一条资产</p>
                    </div>
                </a>
                <a class="quick-card" href="{% url 'assets:bulk_import_assets' %}" style="--gradient-1: var(--gradient-3);">
                    <div class="quick-icon" style="background: var(--gradient-3);"><i class="fas fa-file-upload"></i></div>
                    <div>
                        <p class="quick-title">批量导入</p>
                        <p class="quick-sub">Excel 模板导入</p>
                    </div>
                </a>
                <a class="quick-card" href="{% url 'assets:asset_list' %}" style="--gradient-1: var(--gradient-1);">
                    <div class="quick-icon" style="background: var(--gradient-1);"><i class="fas fa-boxes"></i></div>
                    <div>
                        <p class="quick-title">资产列表</p>
                        <p class="quick-sub">查看与筛选资产</p>
                    </div>
                </a>
                <a class="quick-card" href="{% url 'assets:warehouse_list' %}" style="--gradient-1: var(--gradient-4);">
                    <div class="quick-icon" style="background: var(--gradient-4);"><i class="fas fa-warehouse"></i></div>
                    <div>
                        <p class="quick-title">库存管理</p>
                        <p class="quick-sub">耗材与仓库</p>
                    </div>
                </a>
                <a class="quick-card" href="{% url 'assets:borrow_request_list' %}" style="--gradient-1: var(--gradient-5);">
                    <div class="quick-icon" style="background: var(--gradient-5);"><i class="fas fa-handshake"></i></div>
                    <div>
                        <p class="quick-title">借用归还</p>
                        <p class="quick-sub">申请与审批</p>
                    </div>
                </a>
                <a class="quick-card" href="{% url 'assets:analytics_dashboard' %}" style="--gradient-1: var(--gradient-3);">
                    <div class="quick-icon" style="background: var(--gradient-3);"><i class="fas fa-chart-line"></i></div>
                    <div>
                        <p class="quick-title">报表分析</p>
                        <p class="quick-sub">数据可视与导出</p>
                    </div>
                </a>
            </div>
        </div>

        <!-- 统计卡片区域 -->
        <div class="stats-section">
            <div class="stats-grid">
                <div class="stat-card animate-slide-up" style="--card-gradient: var(--gradient-1);">
                    <div class="stat-header">
                        <div class="stat-icon">
                            <i class="fas fa-boxes"></i>
                        </div>
                    </div>
                    <div class="stat-number" id="totalAssets">{{ total_assets }}</div>
                    <div class="stat-label">资产总数</div>
                    <div class="stat-trend trend-up">
                        <i class="fas fa-arrow-up"></i>
                        本月新增 {{ monthly_new_assets }} 个
                    </div>
                </div>

                <div class="stat-card animate-slide-up"
                    style="--card-gradient: var(--gradient-4); animation-delay: 0.1s;">
                    <div class="stat-header">
                        <div class="stat-icon">
                            <i class="fas fa-play-circle"></i>
                        </div>
                    </div>
                    <div class="stat-number">{{ in_use_count }}</div>
                    <div class="stat-label">使用中资产</div>
                    <div class="stat-trend trend-up">
                        <i class="fas fa-chart-line"></i>
                        使用率 {% if total_assets > 0 %}{% widthratio in_use_count total_assets 100 %}{% else %}0{% endif %}%
                    </div>
                </div>
                <div class="stat-card animate-slide-up"
                    style="--card-gradient: var(--gradient-3); animation-delay: 0.2s;">
                    <div class="stat-header">
                        <div class="stat-icon">
                            <i class="fas fa-users"></i>
                        </div>
                    </div>
                    <div class="stat-number">{{ active_users }}</div>
                    <div class="stat-label">活跃用户</div>
                    <div class="stat-trend">
                        <i class="fas fa-building"></i>
                        {{ departments_count }} 个部门
                    </div>
                </div>

                <div class="stat-card animate-slide-up {% if low_stock_consumables > 0 %}animate-pulse{% endif %}"
                    style="--card-gradient: var(--gradient-2); animation-delay: 0.3s;">
                    <div class="stat-header">
                        <div class="stat-icon">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                    </div>
                    <div class="stat-number">{{ low_stock_consumables }}</div>
                    <div class="stat-label">库存预警</div>
                    <div class="stat-trend {% if low_stock_consumables > 0 %}trend-down{% else %}trend-up{% endif %}">
                        <i
                            class="fas fa-{% if low_stock_consumables > 0 %}exclamation-circle{% else %}check-circle{% endif %}"></i>
                        {% if low_stock_consumables > 0 %}需要关注{% else %}状态正常{% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="dashboard-grid">
            <!-- 主要内容区域 -->
            <div class="left-panel">
                <!-- 功能模块 -->
                <div class="modules-section compact">
                    <div class="section-header">
                        <div class="section-icon">
                            <i class="fas fa-th-large"></i>
                        </div>
                        <h2>功能模块</h2>
                    </div>

                    <div class="modules-left">
                        <div class="modules-grid">
                        <div class="module-card animate-slide-up"
                            style="--module-gradient: var(--gradient-1); animation-delay: 0.4s;"
                            onclick="location.href=`{% url 'assets:asset_list' %}`">
                            <div class="module-header">
                                <div class="module-icon">
                                    <i class="fas fa-boxes"></i>
                                </div>
                                <h3 class="module-title">资产管理</h3>
                            </div>
                            <p class="module-description">
                                全面管理固定资产的采购、使用、维护、折旧等全生命周期流程，确保资产价值最大化
                            </p>
                            <div class="module-stats">
                                <div class="module-stat-item">
                                    <i class="fas fa-database"></i>
                                    <span>总资产: <span class="module-stat-number">{{ total_assets }}</span></span>
                                </div>
                                <div class="module-stat-item">
                                    <i class="fas fa-play-circle"></i>
                                    <span>使用中: <span class="module-stat-number">{{ in_use_count }}</span></span>
                                </div>
                            </div>
                        </div>
                        <div class="module-card animate-slide-up"
                            style="--module-gradient: var(--gradient-4); animation-delay: 0.5s;"
                            onclick="location.href=`{% url 'assets:warehouse_list' %}`">
                            <div class="module-header">
                                <div class="module-icon">
                                    <i class="fas fa-warehouse"></i>
                                </div>
                                <h3 class="module-title">库存管理</h3>
                            </div>
                            <p class="module-description">
                                智能管理仓库信息、耗材库存，实时监控库存状态，自动预警提醒
                            </p>
                            <div class="module-stats">
                                <div class="module-stat-item">
                                    <i class="fas fa-exclamation-triangle"></i>
                                    <span>预警项: <span class="module-stat-number {% if low_stock_consumables|default:0 > 0 %}warn{% endif %}">{{ low_stock_consumables|default:0 }}</span>
                                    {% if low_stock_consumables|default:0 > 0 %}
                                        <a class="module-stat-link" href="{% url 'assets:inventory_alert_list' %}">查看</a>
                                    {% endif %}
                                    </span>
                                </div>
                                <div class="module-stat-item">
                                    <i class="fas fa-building"></i>
                                    <span>部门数: <span class="module-stat-number">{{ departments_count }}</span></span>
                                </div>
                            </div>
                        </div>

                        <div class="module-card animate-slide-up"
                            style="--module-gradient: var(--gradient-3); animation-delay: 0.6s;"
                            onclick="location.href=`{% url 'assets:inventory_plan_list' %}`">
                            <div class="module-header">
                                <div class="module-icon">
                                    <i class="fas fa-clipboard-check"></i>
                                </div>
                                <h3 class="module-title">资产盘点</h3>
                            </div>
                            <p class="module-description">
                                制定科学的盘点计划，执行高效的盘点任务，确保账实相符，提升管理精度
                            </p>
                            <div class="module-stats">
                                <div class="module-stat-item">
                                    <i class="fas fa-clock"></i>
                                    <span>待盘点</span>
                                </div>
                                <div class="module-stat-item">
                                    <i class="fas fa-spinner"></i>
                                    <span>进行中</span>
                                </div>
                            </div>
                        </div>

                        <div class="module-card animate-slide-up"
                            style="--module-gradient: var(--gradient-5); animation-delay: 0.7s;"
                            onclick="location.href=`{% url 'assets:borrow_request_list' %}`">
                            <div class="module-header">
                                <div class="module-icon">
                                    <i class="fas fa-handshake"></i>
                                </div>
                                <h3 class="module-title">借用归还</h3>
                            </div>
                            <p class="module-description">
                                完整的资产借用申请、审批流程、借出归还管理，提升资产利用效率
                            </p>
                            <div class="module-stats">
                                <div class="module-stat-item">
                                    <i class="fas fa-hourglass-half"></i>
                                    <span>待审批</span>
                                </div>
                                <div class="module-stat-item">
                                    <i class="fas fa-hand-holding"></i>
                                    <span>借用中</span>
                                </div>
                            </div>
                        </div>
                        <div class="module-card animate-slide-up"
                            style="--module-gradient: var(--gradient-7); animation-delay: 0.8s;"
                            onclick="location.href=`{% url 'assets:maintenance_list' %}`">
                            <div class="module-header">
                                <div class="module-icon">
                                    <i class="fas fa-tools"></i>
                                </div>
                                <h3 class="module-title">维修管理</h3>
                            </div>
                            <p class="module-description">
                                全程记录资产维修历史，实时跟踪维修进度，精确管理维修成本和供应商
                            </p>
                            <div class="module-stats">
                                <div class="module-stat-item">
                                    <i class="fas fa-wrench"></i>
                                    <span>维修中: <span class="module-stat-number">{{ maintenance_count }}</span></span>
                                </div>
                                <div class="module-stat-item">
                                    <i class="fas fa-calendar-alt"></i>
                                    <span>本月维修</span>
                                </div>
                            </div>
                        </div>

                        <div class="module-card animate-slide-up"
                            style="--module-gradient: var(--gradient-2); animation-delay: 0.9s;"
                            onclick="location.href=`{% url 'assets:analytics_dashboard' %}`">
                            <div class="module-header">
                                <div class="module-icon">
                                    <i class="fas fa-chart-line"></i>
                                </div>
                                <h3 class="module-title">报表分析</h3>
                            </div>
                            <p class="module-description">
                                智能生成多维度统计报表，深度数据分析图表，支持多格式导出分享
                            </p>
                            <div class="module-stats">
                                <div class="module-stat-item">
                                    <i class="fas fa-chart-bar"></i>
                                    <span>实时数据</span>
                                </div>
                                <div class="module-stat-item">
                                    <i class="fas fa-cube"></i>
                                    <span>多维分析</span>
                                </div>
                            </div>
                        </div>

                        <!-- 新增模块：组织架构 -->
                        <div class="module-card animate-slide-up"
                            style="--module-gradient: var(--gradient-8); animation-delay: 1.0s;"
                            onclick="location.href=`{% url 'assets:organization_list' %}`">
                            <div class="module-header">
                                <div class="module-icon">
                                    <i class="fas fa-sitemap"></i>
                                </div>
                                <h3 class="module-title">组织架构</h3>
                            </div>
                            <p class="module-description">
                                管理组织、部门与位置，清晰梳理资产归属与层级关系
                            </p>
                            <div class="module-stats">
                                <div class="module-stat-item">
                                    <i class="fas fa-building"></i>
                                    <span>组织</span>
                                </div>
                                <div class="module-stat-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>位置</span>
                                </div>
                            </div>
                        </div>

                        <!-- 新增模块：系统管理 -->
                        <div class="module-card animate-slide-up"
                            style="--module-gradient: var(--gradient-6); animation-delay: 1.1s;"
                            onclick="location.href=`{% url 'assets:system_parameter_list' %}`">
                            <div class="module-header">
                                <div class="module-icon">
                                    <i class="fas fa-sliders-h"></i>
                                </div>
                                <h3 class="module-title">系统管理</h3>
                            </div>
                            <p class="module-description">
                                参数配置与系统日志等系统级设置，保障系统稳定运行
                            </p>
                            <div class="module-stats">
                                <div class="module-stat-item">
                                    <i class="fas fa-server"></i>
                                    <span>日志</span>
                                </div>
                            </div>
                        </div>

                        <!-- 新增模块：转移调拨 -->
                        <div class="module-card animate-slide-up"
                            style="--module-gradient: var(--gradient-5); animation-delay: 1.2s;"
                            onclick="location.href=`{% url 'assets:transfer_list' %}`">
                            <div class="module-header">
                                <div class="module-icon">
                                    <i class="fas fa-exchange-alt"></i>
                                </div>
                                <h3 class="module-title">转移调拨</h3>
                            </div>
                            <p class="module-description">
                                发起与管理资产转移、部门/位置调拨，记录完整审批与流转
                            </p>
                            <div class="module-stats">
                                <div class="module-stat-item">
                                    <i class="fas fa-paper-plane"></i>
                                    <span>我的申请</span>
                                </div>
                                <div class="module-stat-item">
                                    <i class="fas fa-tasks"></i>
                                    <span>待处理</span>
                                </div>
                            </div>
                        </div>

                        <!-- 新增模块：权限与角色 -->
                        <div class="module-card animate-slide-up"
                            style="--module-gradient: var(--gradient-3); animation-delay: 1.3s;"
                            onclick="location.href=`{% url 'assets:user_list' %}`">
                            <div class="module-header">
                                <div class="module-icon">
                                    <i class="fas fa-user-shield"></i>
                                </div>
                                <h3 class="module-title">权限与角色</h3>
                            </div>
                            <p class="module-description">
                                管理用户、用户组与权限策略，保障系统安全与合规
                            </p>
                            <div class="module-stats">
                                <div class="module-stat-item">
                                    <i class="fas fa-users"></i>
                                    <span>用户</span>
                                </div>
                                <div class="module-stat-item">
                                    <i class="fas fa-users-cog"></i>
                                    <span>用户组</span>
                                </div>
                            </div>
                        </div>

                        <!-- 新增模块：合同管理 -->
                        <div class="module-card animate-slide-up"
                            style="--module-gradient: var(--gradient-2); animation-delay: 1.4s;"
                            onclick="location.href=`{% url 'assets:contract_list' %}`">
                            <div class="module-header">
                                <div class="module-icon">
                                    <i class="fas fa-file-contract"></i>
                                </div>
                                <h3 class="module-title">合同管理</h3>
                            </div>
                            <p class="module-description">
                                统一管理合同台账、到期提醒与附件，支持查询与导出
                            </p>
                            <div class="module-stats">
                                <div class="module-stat-item">
                                    <i class="fas fa-folder-open"></i>
                                    <span>合同</span>
                                </div>
                                <div class="module-stat-item">
                                    <i class="fas fa-bell"></i>
                                    <span>到期预警</span>
                                </div>
                            </div>
                        </div>

                        <!-- 新增模块：供应商管理 -->
                        <div class="module-card animate-slide-up"
                            style="--module-gradient: var(--gradient-4); animation-delay: 1.5s;"
                            onclick="location.href=`{% url 'assets:supplier_list' %}`">
                            <div class="module-header">
                                <div class="module-icon">
                                    <i class="fas fa-truck"></i>
                                </div>
                                <h3 class="module-title">供应商</h3>
                            </div>
                            <p class="module-description">
                                维护供应商档案、资质与合作记录，支持证照到期提醒
                            </p>
                            <div class="module-stats">
                                <div class="module-stat-item">
                                    <i class="fas fa-id-card"></i>
                                    <span>资质</span>
                                </div>
                                <div class="module-stat-item">
                                    <i class="fas fa-handshake"></i>
                                    <span>合作</span>
                                </div>
                            </div>
                        </div>

                        </div>
                        <div class="common-actions-wrapper">
                        <!-- 常用功能（紧凑，底部对齐） -->
                        <div class="module-card animate-slide-up" style="--module-gradient: var(--gradient-6); animation-delay: 0.35s;">
                            <div class="module-header">
                                <div class="module-icon">
                                    <i class="fas fa-star"></i>
                                </div>
                                <h3 class="module-title">常用功能</h3>
                            </div>
                            <p class="module-description">将高频操作集中展示，快速直达关键功能</p>
                            <div class="common-actions-horizontal">
                                <a class="common-action" href="{% url 'assets:asset_create' %}"><i class="fas fa-plus"></i>新增资产</a>
                                <a class="common-action" href="{% url 'assets:bulk_import_assets' %}"><i class="fas fa-file-upload"></i>批量导入资产</a>
                                <a class="common-action" href="{% url 'assets:borrow_request_create' %}"><i class="fas fa-handshake"></i>借用申请</a>
                                <a class="common-action" href="{% url 'assets:inventory_plan_create' %}"><i class="fas fa-clipboard-check"></i>创建盘点计划</a>
                                <a class="common-action" href="{% url 'assets:advanced_search' %}"><i class="fas fa-search"></i>高级搜索</a>
                                <a class="common-action" href="{% url 'assets:asset_batch_print_labels' %}"><i class="fas fa-print"></i>批量打印标签</a>
                                <a class="common-action" href="{% url 'assets:label_template_designer' %}"><i class="fas fa-tags"></i>标签模板设计</a>
                                <a class="common-action" href="{% url 'assets:contract_create' %}"><i class="fas fa-file-signature"></i>新增合同</a>
                                <a class="common-action" href="{% url 'assets:supplier_create' %}"><i class="fas fa-truck"></i>新增供应商</a>
                                <a class="common-action" href="{% url 'assets:organization_create' %}"><i class="fas fa-sitemap"></i>新增组织</a>
                                <a class="common-action" href="{% url 'assets:system_log_list' %}"><i class="fas fa-list"></i>系统日志</a>
                            </div>
                        </div>
                    </div>
                    <div class="insights-stack">
                        <!-- 最近活动（紧凑小卡片） -->
                        <div class="sidebar-card compact recent-activity-card animate-slide-up" style="animation-delay: 1s;">
                            <div class="sidebar-header">
                                <div class="sidebar-icon">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <h3 class="sidebar-title">最近活动</h3>
                            </div>

                            <div class="activity-list">
                            {% if recent_assets %}
                            {% for asset in recent_assets|slice:":5" %}
                            <div class="activity-item">
                                <div class="activity-icon" style="background: var(--gradient-1);">
                                    <i class="fas fa-plus"></i>
                                </div>
                                <div class="activity-content">
                                    <div class="activity-title">新增资产：{{ asset.name }}</div>
                                    <div class="activity-meta">
                                        <div class="activity-time">
                                            <i class="fas fa-clock"></i>
                                            {{ asset.created_at|timesince }}前
                                        </div>
                                        {% if asset.department %}
                                        <span>{{ asset.department.name }}</span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                            {% endif %}

                            {% if recent_maintenance %}
                            {% for maintenance in recent_maintenance|slice:":5" %}
                            <div class="activity-item">
                                <div class="activity-icon" style="background: var(--gradient-7);">
                                    <i class="fas fa-tools"></i>
                                </div>
                                <div class="activity-content">
                                    <div class="activity-title">维修记录：{{ maintenance.asset.name }}</div>
                                    <div class="activity-meta">
                                        <div class="activity-time">
                                            <i class="fas fa-clock"></i>
                                            {{ maintenance.created_at|timesince }}前
                                        </div>
                                        <span>{{ maintenance.maintenance_type|default:"常规维修" }}</span>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                            {% endif %}
                            </div>

                            <div class="d-flex justify-content-end mt-2">
                                {% if activity_list_url %}
                                <a class="text-primary" href="{{ activity_list_url }}">查看全部</a>
                                {% endif %}
                            </div>

                            {% if not recent_assets and not recent_maintenance %}
                            <div class="text-center py-5" style="color: #718096;">
                                <div class="animate-float">
                                    <i class="fas fa-inbox fa-3x mb-3" style="opacity: 0.3;"></i>
                                </div>
                                <p class="mb-0">暂无最近活动</p>
                                <small>系统将在这里显示最新的操作记录</small>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            <!-- 侧边栏已整合到 modules-section.insights-stack -->
        </div>
    </div>
</div>

<!-- 快捷操作浮动按钮 -->
<div class="fab-container">
    <div class="fab-menu" id="fabMenu">
        <a href="{% url 'assets:asset_create' %}" class="fab-item">
            <div class="fab-item-icon">
                <i class="fas fa-plus"></i>
            </div>
            <span>新增资产</span>
        </a>
        <!-- 其他快捷操作项 -->
    </div>
    <button class="fab-main" id="fabMain">
        <i class="fas fa-plus"></i>
    </button>
</div>

<script>
    // 浮动按钮交互
    document.addEventListener('DOMContentLoaded', function() {
        const fabMain = document.getElementById('fabMain');
        const fabMenu = document.getElementById('fabMenu');
        
        fabMain.addEventListener('click', function() {
            fabMenu.classList.toggle('active');
        });

        // 点击其他区域关闭浮动菜单
        document.addEventListener('click', function(event) {
            if (!fabMain.contains(event.target) && !fabMenu.contains(event.target)) {
                fabMenu.classList.remove('active');
            }
        });

        // 全局搜索功能
        const searchInput = document.getElementById('globalSearch');
        const searchBtn = document.querySelector('.hero-search .search-btn');

        function triggerSearch() {
            const searchTerm = searchInput.value.trim();
            if (searchTerm) {
                alert(`搜索内容: ${searchTerm}`);
                // 实际项目中应替换为真实的搜索请求
                // window.location.href = `/search?query=${encodeURIComponent(searchTerm)}`;
            }
        }

        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                triggerSearch();
            }
        });
        if (searchBtn) {
            searchBtn.setAttribute('aria-label', '执行搜索');
            searchBtn.addEventListener('click', function() {
                triggerSearch();
            });
        }

        // 为卡片添加点击效果反馈
        const clickableCards = document.querySelectorAll('.stat-card, .module-card, .status-item, .activity-item');
        clickableCards.forEach(card => {
            card.addEventListener('click', function() {
                this.style.transform = 'scale(0.98)';
                setTimeout(() => {
                    this.style.transform = '';
                }, 150);
            });
        });
    });
</script>
{% endblock %}
